<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-timer">
      <el-divider content-position="center">显示设置</el-divider>
      <dropdown-normal label="显示格式" :valLists="TIMER_PATTERN" v-model="commonAttr.pattern" @change="onChangeAttr"></dropdown-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" label="字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'

  import { TIMER_PATTERN } from '@/common/const'
  import { editUtils } from '@/views/js/edit-utils'

  export default {
    name: "RightTimer",
    mixins: [editUtils],
    setup () {
      return {
        TIMER_PATTERN: TIMER_PATTERN,
      };
    },
    components: {
      RightTemplate,
      ColorNormal,
      DropdownNormal,
      SliderNormal,
    },
  };
</script>
